import React from "react";
import { createBrowserRouter, Navigate } from "react-router-dom";
import { RouterLazy } from "./RouterLazy";
import NotFound from "../views/404";
import Layout from "../views/Layout";
import PrivateRoute from "./PrivateRoute";

// 路由配置
const routes = [
    // 根路径重定向到欢迎页
    {
        path: "/",
        element: <Navigate to="/welcome?id=123" replace state={{ from: "/" }} />,
    },
    // 欢迎页 - 公开路由，不需要认证
    {
        path: "/welcome",
        element: RouterLazy(React.lazy(() => import("../views/Welcome"))),
        // 路由加载器，用于提供路由数据
        loader: () => {
            return {
                meta: {
                    title: "欢迎页",
                    requiresAuth: false,
                },
            };
        },
    },
    // 主布局路由 - 需要认证
    {
        id: "layout",
        path: "/app",
        // 使用 PrivateRoute 包裹 Layout，确保只有认证用户可以访问
        // 当访问 /basic 路径时，Layout 和 PrivateRoute 会先渲染一次，然后懒加载的组件又会触发一次渲染
        element: (
            <PrivateRoute>
                <Layout />
            </PrivateRoute>
        ),
        // 路由加载器，用于提供路由数据
        loader: () => {
            return {
                meta: {
                    title: "应用页",
                    requiresAuth: true, // 标记为需要认证的路由
                    icon: "DashboardOutlined", // 路由图标
                },
            };
        },
        // 子路由配置
        children: [
            // 基础页面 - 需要认证
            {
                id: "/app/basic",
                path: "basic",
                // 使用 RouterLazy 实现懒加载
                element: RouterLazy(React.lazy(() => import("../views/basic/index.tsx"))),
                // 路由加载器，用于提供路由数据
                loader: () => {
                    return {
                        meta: {
                            title: "基础页面",
                            icon: "SettingOutlined",
                            requiresAuth: true,
                        },
                    };
                },
            },
            {
                id: "/app/routeParams",
                path: "routeParams",
                // 使用 RouterLazy 实现懒加载
                element: RouterLazy(React.lazy(() => import("../views/routeParams/index.tsx"))),
                // 路由加载器，用于提供路由数据
                loader: () => {
                    return {
                        meta: {
                            title: "路由参数",
                            icon: "SettingOutlined",
                            requiresAuth: true,
                        },
                    };
                },
            },
        ],
    },
    // 404 页面 - 公开路由
    {
        path: "/404",
        element: <NotFound />,
        // 路由加载器，用于提供路由数据
        loader: () => {
            return {
                meta: {
                    title: "页面不存在",
                    requiresAuth: false,
                },
            };
        },
    },
    // 通配符路由 - 未匹配的路径重定向到 404
    {
        path: "*",
        element: <Navigate to="/404?from=redirect" replace state={{ from: "redirect" }} />,
    },
];

export default createBrowserRouter(routes);
